<template>
	<view>
		<view class="cu-list menu">
			<view class="cu-item">
				<view class="content margin-top">
					<view class="cu-avatar radius lg" :style="[{backgroundImage:'url('+friendInfo.friendFaceImage+')'}]"></view>
					<view style="padding-left: 10px;">{{friendInfo.friendUsername}}</view>
				</view>
			</view>
			<view class="cu-item arrow margin-top">
				<view class="content" >
					<text class="text-grey mytitle">查看聊天记录</text>
				</view>
			</view>
			<view class="cu-item arrow margin-top"  @tap="delHistory">
				<view class="content">
					<text class="text-grey mytitle">清空聊天记录</text>
				</view>
			</view>
		</view>
		
		
		<view class="cu-modal" :class="isShow?'show':''">
			<view class="cu-dialog">
				<view class="padding-xl">
					确定删除和{{friendInfo.friendUsername}}的聊天内容吗？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn bg-gray" @tap="hideModal">取消</button>
						<button class="cu-btn bg-red margin-left" @tap="hideModal">确定</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			// 获取用户信息
			this.userInfo = this.$tool.getStorageSync("userInfo")
			
			// 获取上一个页面传过来的好友信息
			this.friendInfo = JSON.parse(decodeURIComponent(options.user))
		},
		data() {
			return{
				userInfo:null,
				friendInfo:null,
				isShow:false
			}
		},
		methods:{
			delHistory() {
				// 删除与该好友的聊天记录
				this.$tool.delChatHistory(this.userInfo.id,this.friendInfo.friendUserId)
				// 将聊天快照的消息至空
				this.$tool.emptyChatSnapShot(this.userInfo.id,this.friendInfo.friendUserId)
				// 关闭对话框
				this.isShow = true
			},
			hideModal(e) {
				// 关闭对话框
				this.isShow = false
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F1F1;
	}
</style>
